<template>
  <ul class="red">
    <li>
        <div class="Preferential">
          <h4>超值特惠</h4>
          <img src="http://img4.imgtn.bdimg.com/it/u=1021374652,1642433034&fm=26&gp=0.jpg" alt="">
        </div>
    </li>
    <li>
        <div class="Popularity">
          <h4>人气产品</h4>
          <img src="http://img4.imgtn.bdimg.com/it/u=1021374652,1642433034&fm=26&gp=0.jpg" alt="">
        </div>
    </li>
    <li>
        <div class="redshop">
          <h4>小红店</h4>
          <img src="http://img4.imgtn.bdimg.com/it/u=1021374652,1642433034&fm=26&gp=0.jpg" alt="">
        </div>
    </li>
  </ul>
</template>
<style lang="scss">
@import '@/lib/reset.scss';
.red {
  overflow:hidden;
  li{
    float:left;
    @include rect(1.13rem, 1rem);
    @include background-color(rgba(248,248,248,1));
    @include text-align(center);
    margin:0.02rem 0.06rem;
    .Preferential{
      @include rect(0.69rem, 0.6rem);
      margin-left:21px;
      h4{
        @include rect(.56rem, 0.2rem);
      }
     img{
        @include rect(0.69rem, 0.6rem);
        margin-left:13px;
     }
    }
    .Popularity{
      @include rect(0.69rem, 0.6rem);
      h4{
        @include rect(.56rem, 0.2rem);
      }
     img{
        @include rect(0.69rem, 0.6rem);
         margin-left:13px;
     }
    }
    .redshop{
      @include rect(0.69rem, 0.6rem);
      h4{
        @include rect(.56rem, 0.2rem);
      }
     img{
        @include rect(0.69rem, 0.6rem);
         margin-left:13px;
     }
    }
  }
}
</style>
